<template>
	<view class="userinfo-page">
		<!-- 头部 -->
		<view class="userinfo-top">
			<image :src="userInfo.avatarUrl" class="userinfo-image"></image>
			<text class="userinfo-text">{{userInfo.nickName}}</text>
		</view>
		<!--第一组标签-->
		<view class="userinfo-list favorite-list">
			<view class="favorite-item">
				<view class="favorite-num">8</view>
				<view class="">收藏店铺</view>
			</view>
			<view class="favorite-item">
				<view class="favorite-num">14</view>
				<view class="">收藏商品</view>
			</view>
			<view class="favorite-item">
				<view class="favorite-num">18</view>
				<view class="">关注商品</view>
			</view>
			<view class="favorite-item">
				<view class="favorite-num">84</view>
				<view class="">足迹</view>
			</view>
		</view>
		<!--第二组标签-->
		<view class="userinfo-order-list">
			<view class="order-title">我的订单</view>
			<view class="userinfo-list">
				<view class="userinfo-list-item">
					<view class="userinfo-list-image">
						<image src="../../static/no_pay_order.png" class="order-image"></image>
					</view>
					<view class="userinfo-list-text">待付款</view>
				</view>
				<view class="userinfo-list-item">
					<view class="userinfo-list-image">
						<image src="../../static/trans_order.png"  class="order-image"></image>
					</view>
					<view class="userinfo-list-text">待收货</view>
				</view>
				<view class="userinfo-list-item">
					<view class="userinfo-list-image">
						<image src="../../static/return_order.png"  class="order-image"></image>
					</view>
					<view class="userinfo-list-text">退款/退货</view>
				</view>
				<view class="userinfo-list-item">
					<view class="userinfo-list-image">
						<image src="../../static/all_order.png" class="order-image"></image>
					</view>
					<view class="userinfo-list-text">全部订单</view>
				</view>
			</view>
		</view>
		<!--第三组标签-->
		<view class="userinfo-last">
			<view class="userinfo-last-item">
				<view class="userinfo-last-left">收货地址</view>
				<uni-icons type="right" size="15" class="userinfo-last-icon"></uni-icons>
			</view>
			<view class="userinfo-last-item">
				<view class="userinfo-last-left">联系客服</view>
				<uni-icons type="right" size="15" class="userinfo-last-icon"></uni-icons>
			</view>
			<view class="userinfo-last-item" @click="logout">
				<view class="userinfo-last-left">退出登录</view>
				<uni-icons type="right" size="15" class="userinfo-last-icon"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {useStore} from 'vuex';
	
	const store  = useStore();
	const userInfo = store.state.m_user.userInfo
	
	// 退出登录
	async function logout(){
		const res = await uni.showModal({
			title:'提示',
			content: '确定要退出登录么？'
		})
		if(res && res.confirm){
			// 清空用户信息
			store.commit('m_user/updateUserInfo', {})
			// 清空地址
			store.commit('m_user/updataAddress', {})
			// 清空token
			store.commit('m_user/updateToken', '')
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.userinfo-page{
	background-color: #efefef;
	height: 100%;
	
	.userinfo-top{
		background-color: #c00000;
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding-bottom: 40px;
		// height: ;
		.userinfo-image{
			margin-top: 50px;
			width: 100px;
			height: 100px;
			border: 2px solid #fff;
			border-radius: 100%;
			box-shadow: 0 2px 5px rgba(50,50,50, 0.5);
			margin-bottom: 10px;
		}
		.userinfo-text{
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			
		}
	}
	.favorite-list{
		margin-top: -15px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.userinfo-list{
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		.favorite-item{
			width: 25%;
			box-sizing: border-box;
			padding: 10px;
			text-align: center;
			font-size: 14px;
			.favorite-num{
				margin-bottom: 10px;
			}
		}
	}
	
	.userinfo-order-list{
		background-color: #fff;
		border-radius: 8px;
		margin: 10px;
		.order-title{
			font-size: 18px;
			border-bottom: 1px solid #efefef;
			padding: 10px;
		}
		.userinfo-list{
			.userinfo-list-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 10px;
				box-sizing: border-box;
				width: 25%;
				.userinfo-list-image{
					.order-image{
						width: 25px;
						height: 25px;
					}
					margin-bottom: 5px;
				}
				.userinfo-list-text{
					font-size: 14px;
				}
			}
		}
	}
	
	.userinfo-last{
		background-color: #fff;
		border-radius: 8px;
		margin: 10px;
		display: flex;
		flex-direction: column;
		.userinfo-last-item{
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			padding: 10px;
		}
	}
}
</style>